<script setup>
// #region 引入包, 函数和组件
import { onMounted, ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue"; // Swiper的组件

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const props = defineProps(["film_list", "current_film_index"]);
const emits = defineEmits(["changeIndex"]);
const swiper = ref(null);
// const swiper = new Swiper()
// #endregion

// #region // 变量

// #endregion

// #region // 函数
const onSwiper = (e) => {
  swiper.value = e;
  // console.log(swiper.value, 11);
};
// #endregion

// #region // 生命周期和vue函数
onMounted(() => {
  // swiper.activeIndex = 3
});
// #endregion
</script>

<template>
  <div class="film_list">
    <img :src="film_list?.[current_film_index].poster" />
    <Swiper
      :slidesPerView="4"
      :spaceBetween="30"
      :centeredSlides="true"
      :initial-slide="current_film_index"
      @swiper="onSwiper"
      @activeIndexChange="emits('changeIndex', $event)"
      class="swiper"
    >
      <swiper-slide
        v-for="(img, index) in film_list"
        :key="img.filmId"
        @click="swiper.slideTo(index)"
      >
        <img :class="{ active: current_film_index === index }" :src="img.poster" />
      </swiper-slide>
    </Swiper>
    <div class="slider"></div>
  </div>
  <div
    class="film_detail"
    @click="$router.push({ name: 'filmdetail', params: { filmId: $route.params.filmId } })"
  >
    <h3>
      {{ film_list?.[current_film_index].name }}
      <span
        ><em>{{ film_list?.[current_film_index].grade }}</em
        >分</span
      >
    </h3>
    <i>&gt;</i>
    <p>
      {{ film_list?.[current_film_index].category }} |
      {{ film_list?.[current_film_index].runtime }}分钟 |
      {{ film_list?.[current_film_index].director }} |
      {{ film_list?.[current_film_index].actors.map((v) => v.name).join(" ") }}
    </p>
  </div>
</template>

<style lang="scss" scoped>
@mixin nowrap($size) {
  font-size: $size;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.film_list {
  height: 1.6rem;
  padding: 0.15rem 0;
  position: relative;
  z-index: 8;
  overflow: hidden;
  & > img {
    position: absolute;
    filter: blur(0.3rem) brightness(0.8);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .swiper {
    position: absolute;
    inset: 0;
    z-index: 9;
    height: 100%;
    .swiper-slide {
      position: relative;
      img {
        width: 0.72rem;
        height: 1.04rem;
        object-fit: cover;
        position: absolute;
        bottom: 0.15rem;
        left: 0;
        transition: all 0.3s linear;
      }
      .active {
        width: 0.9rem;
        height: 1.3rem;
        left: -0.13rem;
      }
    }
  }
  .slider {
    background: #fff;
    width: 0.15rem;
    height: 0.15rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    bottom: -0.08rem;
    z-index: 9;
  }
}

.film_detail {
  height: 0.8rem;
  padding: 0.15rem 0;
  position: sticky;
  top: 0.44rem;
  left: 0;
  border-bottom: 0.01rem solid #f5f5f5;
  background: #fff;
  z-index: 10;
  h3 {
    line-height: 0.2rem;
    text-align: center;
    color: var(--cl-blk);
    max-width: 2.75rem;
    @include nowrap(0.15rem);
    margin: 0 auto;
    margin-bottom: 0.12rem;
  }
  p {
    height: 0.18rem;
    line-height: 0.18rem;
    font-size: 0.13rem;
    @include nowrap(0.13rem);
    max-width: 2.75rem;
    text-align: center;
    margin: 0 auto;
    color: var(--cl-wh);
  }
  i {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%) scale(0.8, 1.4);
    font-size: 0.12rem;
  }
  span {
    color: #ffb232;
    font-size: 0.1rem;
    em {
      font-size: 0.16rem;
      font-style: italic;
    }
  }
}
</style>
